<template>
  <div class="nav-bar">
    <ul class="nav-list">
      <li
        v-for="(item, index) in orderNavTree"
        :key="index"
        :class="['nav-list-item', navType == index ? 'router-link-active' : '']"
        @click="goPage(item, index)"
        v-ripple
      >
        <div class="img img0">
          <img v-if="navType == index" :src="getImageSrc(item.activeIcon)" alt />
          <img v-else :src="getImageSrc(item.icon)" alt />
        </div>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { menuStore } from "@/stores/menu";
import { vRipple } from "@/utils/directive/waves.ts";
import { useRouter } from "vue-router";
const router = useRouter();

const store_menu = menuStore();

const navType = ref(0);
const orderNavTree = ref([]);
const routerTilte = ref("");

const getImageSrc = (imageName) => {
  return new URL(`../assets/layout/${imageName}.png`, import.meta.url).href;
  // return import(`../assets/layout/${imageName}.png`);
};
const changeNav = (type) => {
  orderNavTree.value.forEach((item, index) => {
    if (item.name == type) {
      navType.value = index;
    }
  });
};
const goPage = (item, type) => {
  navType.value = type;
  router.push({
    path: item.path,
  });
};
watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    var title = newValue.meta.title;
    changeNav(title);
  },
  { immediate: true }
);
onMounted(() => {
  orderNavTree.value = store_menu.getOrderNavTree;
  routerTilte.value = router.currentRoute.value.meta.title;
  changeNav(routerTilte.value);
});
</script>

<style lang="less" scoped >
@import "../common/style/mixin";
.nav-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98px;
  // padding: 10px 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid rgba(226, 226, 226, 1);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  .nav-list {
    width: 100%;
    height: 100%;
    .fj();
    flex-direction: row;
    padding: 0;
    .nav-list-item {
      display: flex;
      width: 33%;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #666;
      &.router-link-active {
        color: #158aff;
      }
      i {
        text-align: center;
        font-size: 36px;
      }
      .img {
        width: 36px;
        height: 36px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 5px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      // .img0 {
      //   background-image: url("~@/assets/layout/icon11.png");
      // }
      // .img1 {
      //   background-image: url("~@/assets/layout/icon22.png");
      // }
      // .img2 {
      //   background-image: url("~@/assets/layout/icon33.png");
      // }
      // &.router-link-active .img0 {
      //   background-image: url("~@/assets/layout/icon1.png");
      // }
      // &.router-link-active .img1 {
      //   background-image: url("~@/assets/layout/icon2.png");
      // }
      // &.router-link-active .img2 {
      //   background-image: url("~@/assets/layout/icon3.png");
      // }
      span {
        font-size: 24px;
      }
      .van-icon-shopping-cart-o {
        margin: 0 auto;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
